<template>
  <div class="home">
    <form action="/" class="head">
      <search
          v-model="value"
          shape="round"
          background="url('https://www.hangzhou.com.cn/templateRes/202209/08/103025/assets/images/banner.jpg') no-repeat"
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
          @click="clkFn"
        />
    </form>
    <grid :column-num="5">
      <grid-item
      v-for="i in carts"
      :key="i.id"
      :icon="urlImg(i.coverImage)"
      :text="i.name"
      :to="{name:'list',query:{c_id:i.id}}"
      />
    </grid>
    <div class="nav">
      <img src="" alt="">
      <div class="h1">新人专享</div>
      <div class="span">领199元大礼包</div>
      <div class="box">
        <div class="ad">
          <img src="../../images/166536455450334628.gif" alt="">
        </div>
        <div>
          <img src="https://gw.alicdn.com/bao/uploaded/i2/3322992048/O1CN01wKcDa11R01sDgE0OP_!!3322992048.jpg_300x300q90.jpg_.webp" alt="">
          <p>111</p>
        </div>
        <div>
          <img src="https://gw.alicdn.com/bao/uploaded/i2/3322992048/O1CN01wKcDa11R01sDgE0OP_!!3322992048.jpg_300x300q90.jpg_.webp" alt="">
          <p>111</p>
        </div>
        <div>
          <img src="https://gw.alicdn.com/bao/uploaded/i2/3322992048/O1CN01wKcDa11R01sDgE0OP_!!3322992048.jpg_300x300q90.jpg_.webp" alt="">
          <p>111</p>
        </div>
      </div>
    </div>
    <!-- 轮播 -->
    <div class="swp">
      <swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <swipe-item>
          <img src="../../images/s1.gif" alt="">
        </swipe-item>
        <swipe-item>
          <img src="../../images/s2.jpg" alt="">
        </swipe-item>
        <swipe-item>
          <img src="../../images/s3.jpg" alt="">
        </swipe-item>
        <swipe-item>
          <img src="../../images/s4.jpg" alt="" style="height: 110%;">
        </swipe-item>
      </swipe>
      <ul>
        <li>
          <div>
            <span>冰洗钜贵</span>
            <img src="../../images/2.jpg" alt="">
          </div>
          <div>
            <span>取暖好物</span>
            <img src="../../images/3.jpg" alt="">
          </div>
        </li>
        <li>
          <div>
            <span>冰洗钜贵</span>
            <img src="../../images/2.jpg" alt="">
          </div>
          <div>
            <span>取暖好物</span>
            <img src="../../images/3.jpg" alt="">
          </div>
        </li>
      </ul>
    </div>
    <!-- 商品 -->
    <cart/>
  </div>
</template>
<script setup>
import { Grid, GridItem,Swipe, SwipeItem, Search,Toast  } from 'vant';
import {useRouter} from 'vue-router'
import cart from './mermber/catPSD.vue'
import {urlImg} from '../uitils/urlImg'
import { ref } from 'vue';
import {userCartAPI} from '../services/auth'
const {carts} =userCartAPI()
const router=useRouter()
const clkFn=()=>{
  router.push({name:'search'})
}


// 监听
    const value = ref('');
    const onSearch = (val) => Toast(val);
    const onCancel = () => Toast('取消');
</script>
<style lang="scss" scoped>
.home{
  overflow: visible ;
  background-color:#f5f5f9;
  // 商品
  .head{
    position: sticky ;
        top: 0 ; 
        z-index: 999;
  }
  margin: auto;
  .nav{
  width: 99vw;
  background-image: linear-gradient(to right, rgb(247, 242, 242) , rgb(246, 181, 185));
  margin: auto;
  .h1{
    display: inline-block;
    font-size: 1.8rem;
    color: red;
    text-indent: 10px;
    font-family: "黑体";
  }
  .span{
    text-indent: 15px;
    display: inline-block;
    color: red;
  }
  .box{
    width: 90vw;
    margin: auto;
    display: flex;
    img{
      width: 100%;
    }
    div{
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 22vw;
      margin-right: 5px;
    }
    .ad{
      width: 30vw;
      height: 30vw;
      margin-right: 10px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
img{
  display: block;
  width: 9vw;
}
.search__content{
  width: 100%;
}
.swp{
  display: flex;
  justify-content: space-between;
  .my-swipe{
    border-radius: 10px;
  width: 48vw;
  height: 50vw;
  margin: 5px 0 0 5px;
  img{  
    width: 100%;
    height: 100%;
  }
}
ul{
  
  border-radius: 10px;
  width: 48vw;
  height: 50vw;
  margin: 5px 5px 0 0px;
  background-image: linear-gradient(to right, rgb(249, 100, 100) , rgb(245, 169, 169));
  li{
    width: 100%;
    height: 50%;
    div{
      width: 49%;
      height: 100%;
      float: left;
      text-align: center;
      img{
        width: 90%;
        height: 70%;
        border-radius: 10px;
        margin-left: 7px;
      }
      span{
        height: 10%;
        color: white;
        font-weight: bold;
      }
    }
  }
}

}
}

</style>